<template>
	<view class="content  ">
		<view class="padding">
			<view class="padding ffffff radius">
				<view class="flexbetween">
					<view class="nofocusbgc">帖子分类</view>
					<view class="flexleft">
						<input type="text" :value="invitation_type" disabled style="text-align: right;color: #999999;"
							@click="show_label=true">
						<view class="right_icon"></view>
					</view>
				</view>
			</view>
			<view class="padding ffffff radius margin_top">
				<view class="flexbetween">
					<view class="nofocusbgc">标签</view>
					<view class="flexleft">
						<input type="text" placeholder="请输入标签" placeholder-style=" color: #999999;"
							style="text-align: right;" v-model="bq">
						<!-- <view class="right_icon"></view> -->
					</view>
				</view>
			</view>
			<view class="padding ffffff radius margin_top">
				<view class="">
					<view class="nofocusbgc">帖子标题</view>
					<view class="flexleft margin_top">
						<textarea name="" id="" cols="10" rows="10" placeholder-style=" color: #999999;"
							placeholder="请输入帖子标题" style="height: 140rpx;" v-model="title"></textarea>
					</view>
				</view>
			</view>
			<view class="padding ffffff radius margin_top">
				<view class="">
					<view class="nofocusbgc">帖子详情</view>
					<view class="flexleft margin_top">
						<textarea name="" id="" cols="10" rows="10" placeholder-style=" color: #999999;"
							placeholder="请输入帖子详情" style="height: 140rpx;" v-model="content"></textarea>
					</view>
				</view>
			</view>
			<view class="padding ffffff radius margin_top" style="margin-bottom: 100rpx;">
				<view class="nofocusbgc">上传图片（{{images.length}}/9）</view>
				<view class="flexleft flex_wrap">
					<view class="item_image_box margin_top flexcenter" v-for="(item,index) in images" :key="index">
						<view class="item_image radius">
							<image :src="item" mode=""></image>
							<view class="deletimg" @click="deleimage(index,images)"></view>
						</view>
					</view>
					<!-- 图片盒子 -->
					<view class="item_image_box margin_top flexcenter" @click="uploadImg(9,images)"
						v-if="images.length<9">
						<view class="item_image radius">
							<image src="/static/image/my/phonez.png" mode=""></image>
							<!-- <view class="deletimg"></view> -->
						</view>
					</view>
				</view>
			</view>
			<!-- 固定底部 -->
			<view class="gudingdb">
				<view class="bigbtn" @click="sendInvitation">确定</view>
			</view>
			<!-- 帖子类型弹出层 -->
			<u-picker :show="show_label" :columns="columns" keyName="name" closeOnClickOverlay="true"
				@cancel="show_label=false" @confirm="invitationTypeConfirm"></u-picker>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				show_label: false,
				columns: [], //帖子类型列表
				title: "", //帖子标题
				content: "", //帖子详情
				images: [], //帖子图片
				bq: "", //帖子标签
				invitation_type_id: "", //帖子分类id
				invitation_type: "请选择分类", //帖子分类
				invitation_type_list:[],//帖子类型列表
				invitation_id: "", //帖子id
				invitation_info:{},//帖子详情
			}
		},
		onLoad(options) {
			this.getInvitationTypeList()
			if (options.id) {
				this.invitation_id = options.id
				// this.getInvitationInfo()
				uni.setNavigationBarTitle({
				    title: "编辑帖子"
				   });
			}
		},
		methods: {
			getInvitationInfo() { //帖子详情
				let _this = this
				httpRequest.request('/api/invitation/invitationDetail', 'GET', {
					id: _this.invitation_id
				}).then(res => {
					if (res.code == 1) {
						_this.invitation_type_id=res.data.invitation_type_id
						let index=_this.invitation_type_list.findIndex(item=>{
							return item.id==res.data.invitation_type_id
						})
						if(index!=-1){
							_this.invitation_type=_this.invitation_type_list[index].name
						}else{
							_this.invitation_type_id=""
							_this.invitation_type="请选择分类"
						}
						_this.bq=res.data.bq
						_this.title=res.data.title
						_this.content=res.data.content
						_this.images=res.data.images_text
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			getInvitationTypeList() { //帖子类型
				let _this = this
				httpRequest.request('/api/Invitation/invitationType', 'GET', {

				}).then(res => {
					if (res.code == 1) {
						_this.columns.push(res.data)
						_this.invitation_type_list=res.data
						if(_this.invitation_id){
							_this.getInvitationInfo()
						}
						console.log(this.columns[0])
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			invitationTypeConfirm(e) { //选择标签
				this.invitation_type = e.value[0].name
				this.invitation_type_id = e.value[0].id
				this.show_label = false
			},
			sendInvitation() { //发布帖子
				let _this = this
				if(_this.invitation_type_id==""){
					httpRequest.toast("请选择帖子分类")
					return false
				}
				if(_this.bq==""){
					httpRequest.toast("请输入标签")
					return false
				}
				if(_this.title==""){
					httpRequest.toast("请输入标题")
					return false
				}
				if(_this.content==""){
					httpRequest.toast("请输入帖子内容")
					return false
				}
				if(_this.images.length==0){
					httpRequest.toast("请至少上传一张图片")
					return false
				}
				let url = "/api/user/addInvitation"
				let data = {
					title: _this.title,
					content: _this.content,
					images: _this.images.join(),
					bq: _this.bq,
					invitation_type_id: _this.invitation_type_id,
					
				}
				if(this.invitation_id){
					url = "/api/user/editInvitation"
					this.$set(data,"id",this.invitation_id)
				}
				httpRequest.request(url, 'GET',data).then(res => {
					if (res.code == 1) {
						httpRequest.toast(res.msg);
						setTimeout(() => {
							uni.navigateBack(1)
						}, 500)
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			uploadImg(value, upImgs) {
				let _this = this;
				let num = Number(value) - upImgs.length;
				if (num <= 0) {
					return false;
				}
				uni.showActionSheet({
					itemList: ['相机', '相册'],
					success: function(res) {
						// 选择相机走0
						if (res.tapIndex == 0) {
							httpRequest.chooseImage(num, ['camera']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], upImgs)
								}
							}).catch(err => {});
						}
						// 选择相册走1
						if (res.tapIndex == 1) {
							httpRequest.chooseImage(num, ['album']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], upImgs)
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {}
				});
			},
			uploadImageService(url, upImg) {
				let _this = this;
				httpRequest.uploadFile('/api/common/upload', url).then(res => {
					let image_item = res.fullurl;
					upImg.push(image_item);
				}).catch(err => {});
			},
			deleimage(i, upimg) { //删除图片
				upimg.splice(i, 1)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.nofocusbgc {
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.item_image_box {
		width: 33.33%;
	}

	.item_image {
		position: relative;
		width: 180rpx;
		height: 180rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>